<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-order"> 
			<!-- 头部 -->
			<view class="header">
				<image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image>
				<view class="content">
					<view>
						<view class="status-text">剩余次数{{orderData.surplus}}  已使用{{orderData.use}}</view>
						<view class="reason"><text class="reason-text">{{orderData.statetime}}</text></view>
					</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="lists bg-white"  v-if="orderData.id">
				<view class="shopname text-sm padding-top-bj" @tap="$wanlshop.auth('/pages/medicalcare/homemaking/thali')">
					<text class="padding-right-xs wanl-black">套餐卡</text>
					<text class="wlIcon-fanhuigengduo"></text>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar radius" :style="{ backgroundImage: 'url(' + $wanlshop.oss(orderData.goods_image, 77, 77) + ')' }" @tap="onGoods(item.goods_id)"></view>
						<view class="content" @tap="onGoods(orderData.goods.id)">
							<view class="text-cut-2" style="display: block;">
								<text class="cu-tag radius sm bg-red margin-right-xs" style="margin-left: 0;">家政套餐卡</text>
							{{orderData.goods_name}}</view>
							<view class="wanl_sku text-sm">
								<text class="wanl-gray-dark">{{orderData.goods.name}}</text>
							</view>
						</view>
						<view class="action text-sm">
							<view class="wanl-gray text-price">{{orderData.goods.price}}</view>
							<view class="wanl-gray">x {{orderData.goods.quantity}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order bg-white margin-top-bj padding-bj" v-if="orderData.id">
				<view class="title">
					<view class="text-sm">套餐卡详情</view>
					<!-- <view>
						<text class="wlIcon-fanhui3" v-if="infoMore"></text>
						<text class="wlIcon-fanhui4" v-else></text>
					</view> -->
				</view>
				<view class="text-sm">
					<view class="item">
						<text class="wanl-gray" style="width: 160rpx">创建时间：</text>
						<text> {{orderData.createtime_text}} </text>
					</view>
					<block v-if="infoMore">
						<view class="item" v-if="orderData.starttime_text">
							<text class="wanl-gray-dark" style="width: 160rpx">开始时间：</text>
							<text> {{orderData.starttime_text}} </text>
						</view>
						<view class="item" v-if="orderData.endtime_text">
							<text class="wanl-gray-dark" style="width: 160rpx">过期时间：</text>
							<text> {{orderData.endtime_text}} </text>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="wanlian cu-bar foot">
			<button @tap="confirm" class="cu-btn bg-green lg">使用</button>
		</view>
		<view class="edgeInsetBottom"> </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderData: {
				order_no: '',
				address: {
					name: '加载中...',
					mobile: '',
					address: '',
					address_name: ''
				},
				logistics: {
					context: '',
					status: '',
					time: ''
				},
				statetime: ''
			},
			logisticsType: false,
			infoMore: false,
			goods_id:''
		};
	},
	onLoad(option) {
		this.goods_id = option.goods_id
		this.loadData({id:option.id});
	},
	methods: {
		// 获取订单
		async loadData(data) {
			await uni.request({
				url: '/addons/homeking/api.user_thali/detail',
				method:"post",
				data: data,
				success: res => {
					res.data.statetime = 0;
					this.orderData = res.data;
					this.logisticsType = true;
					if(res.data.status == 4){
						this.orderData.statetime = '剩余时间0';
					}else if(res.data.status == 1){
						var diff = (res.data.endtime) - Date.parse(new Date()) / 1000;
						var days = Math.floor(diff / 86400);
						var hours = Math.floor(diff % 86400 / 3600); 
						var minutes = Math.floor(diff % 86400 % 3600 / 60);
						if (minutes > 0) {
							this.orderData.statetime = '还剩' +minutes+ '分过期';
						}
						if (hours > 0) {
							this.orderData.statetime = '还剩' +hours+ '小时' +minutes+ '分过期';
						}
						if (days > 0) {
							this.orderData.statetime = '还剩' +days+ '天' +hours+ '小时' +minutes+ '分过期';
						}
					}else if(res.data.status == 2){
						this.orderData.statetime = '退款中';
					}else if(res.data.status == 3){
						this.orderData.statetime = '取消';
					}else if(res.data.state == 4){	
						this.orderData.statetime = '已过期';
					}else if(res.data.state == 5){	
						this.orderData.statetime = '已使用';
					}
				}
			});
		},
		getStatusText(status) {
			return ["未使用", "退款中", "取消", "已过期", "已使用"][status - 1];
		},
		// 折叠项
		toMore(){
			this.infoMore = !this.infoMore;
		},
		onGoods(id) {
			this.$wanlshop.to(`/pages/medicalcare/homemaking/detail?id=${this.goods_id}`)
		},
		confirm() {
			this.$wanlshop.to(`/pages/user/thali/use?type=homeking&id=${this.goods_id}&num=${this.orderData.goods.quantity}&address_id=0&cur=0&thali_id=${this.orderData.id}`);
		}
	}
};
</script>

<style lang="less">
	.wanl-order .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}
	
	.wanl-order .header .img-bg {
		width: 100%;
		height: 180rpx;
	}
	
	.wanl-order .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}
	
	.wanl-order .header .status-text {
		font-size: 32rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}
	
	.wanl-order .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}
	
	.wanl-order .header .reason-text {
		padding-right: 12rpx;
	}
	
	.wanl-order .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}
	
	
	
	
	.wanl-order .lists .shopname {
	    margin: 25rpx 25rpx 30rpx 25rpx;
	}
	.wanl-order .lists .price>view{
		display: flex;
		align-items: center;
		justify-content:space-between;
		height: 40rpx;
	}
	
	.wanl-order .lists .cu-btn{
		font-size: 22rpx;
		padding: 0 14rpx;
	}
	
	
	
	
	.cu-list.menu-avatar>.cu-item{
		height: 160rpx;
	}
	.cu-list.menu-avatar>.cu-item .content{
		line-height: 1.4;
	}
	
	.wanl-order .order .title{
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: space-between;
	}
	.wanl-order .order .item{
		display: flex;
		padding-top: 30rpx;
	}
	.wanl-order .order .foot{
		display: flex;
		justify-content: space-around;
		justify-items: center;
		align-items: center;
		padding-top: 25rpx;
		margin-top: 20rpx;
	}
	.wanl-order .order .foot text[class*="wlIcon-"]{
		color: #0081FF;
		margin-right: 10rpx;
		font-size: 32rpx;
	}
	
	
.wanlian {
	.cu-btn {
		margin: 0 auto;
		width: 428rpx;
		height: 64rpx;
		background: #f72b36;
		border-radius: 50rpx;
	}
}
</style>
